<template>
    <div class="form">
        <img src="../../assets/invitation/bgc.png" alt="" class="back">

        <div class="make">
            <img src="../../assets/invitation/make.png" alt="" class="make-box">
            <div class="head">
                请填写预约信息
            </div>

            <div class="table">

                <van-form @submit="onSubmit">
                    <van-field
                        v-model="username"
                        name="姓名"
                        placeholder="请输入姓名"
                        
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="usercompany"
                        name="单位"
                        placeholder="请输入所在单位"
                        :rules="[{ required: true, message: '请填写单位名称' }]"
                    />
                     <van-field
                        v-model="userphone"
                        name="电话"
                        placeholder="请输入电话号码"
                        :rules="[{ required: true, message: '请填写电话号码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round  type="info" size="large"  native-type="submit">立即预约</van-button>
                    </div>
                </van-form>

            </div>

        </div>
    </div>
   
</template>
<script>
import {
    exchangeAdd
} from "@/api/form/form"
export default {
     data() {
        return {
            name:'以南',
            phone:'131346789755',
            company:'企保宝',
            username: '',
            usercompany: '',
            userphone: '',

        };
    },
    computed:{

    },
    created() {
        this.init();
    },
    mounted(){

    },
    methods: {
        init(){
            exchangeAdd({
                name:this.name,
                phone:this.phone,
                company:this.company
            }).then((res)=>{
                console.log(res)
            })
        },
        onSubmit(values) {
            console.log('submit', values);
        },
    },
}
</script>
<style scoped lang="scss">
    .form{
        display: flex;
    }
    .back{
        position: fixed;
        width: 100%;
        height: 100%;
        // height: 1417px;
        display: block;
        z-index: 5;
    }
   
    .make{
        margin-left: 30px;
        margin-top: 200px;
    //    margin: 0 auto;
    }
    .make-box{
        position: fixed;
        height: 400px;
        display: block;
        margin: 0 auto;
        border: 1px solid;
        z-index: 6;
    }
     .head{
            width: 130px;
            height: 31px;
            opacity: 1;
            font-size: 16px;
            font-weight: 700;
            text-align: left;
            color: #ffffff;
            letter-spacing: 2px;
            position: fixed;
            z-index: 7;
            margin-left: 90px;
            margin-top: 40px;
        }
        .table{
            position: fixed;
            z-index: 8;
            margin-top: 60px;
            margin-left: 24px;
        }
        .van-cell{
            width: 260px;
            margin-top: 20px;
            border-radius: 8px;
        }
        .van-button--large{
            width: 270px;
            height: 45px;
            margin-left: -20px;
            margin-top: 20px;
            border-radius: 8px;
            background: #4c23e4;
            border: 0;
        }
</style>